<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .bw {
            width: 400px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 400px;
        }

        td {
            border: 1px solid #5513d16b;
            padding: 10px;
        }

        th {
            border: 1px solid #d0d0d0a8;
            background-color: rgb(0, 204, 0);
            color: #fff;
            padding: 10px;
        }

        tr {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <div class="bw">
        <table>
            <tr>
                <th>
                    <input type="checkbox" id="contro1" />
                </th>
                <th>商品</th>
                <th>价格</th>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="fruit" />
                </td>
                <td>桃子</td>
                <td>15</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="fruit" />
                </td>
                <td>猕猴桃</td>
                <td>12</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="fruit" />
                </td>
                <td>香蕉</td>
                <td>11</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="fruit" />
                </td>
                <td>枸杞</td>
                <td>22</td>
            </tr>
        </table>
    </div>


    <script>
        const con1 = document.querySelector("#contro1")
        const fruits = document.querySelectorAll(".fruit")

        //全选
        con1.onclick = function(){
            for(const ck of fruits){
                ck.checked = this.checked;
            }
        }

       /*  fruits.onclick =function(){
            let flag = true;
            for(const ck of fruits){
                if(!ck.checked){//如果有没选中的，checked就是false，取反就是true，执行下面代码
                flag=false;
                }
            }
            con1.checked=flag;
        } */
  
  
    for(const item of fruits){
            item.onclick=function(){
                let flag =true;
                for(const ck of fruits){
                    if(!ck.checked){
                        flag=false;
                    }
                }
                con1.checked = flag;
            }
        }

         
    </script>
</body>

</html>